<template>
	<div class="subpage pay-detail">
		<!-- <address-com :firstList="firstList"></address-com> -->
														<!-- es6判断对象是否为空 -->
		<div class="pay-wrap">
			<div v-if="this.$route.query.fromView !== 'order'">
				<div class="address" @click="toAddress" v-if="Object.keys(this.firstList).length == 0">
					<div class="head clearfix">
						<p class="address-icon">
							<van-icon name="location-o" size="26px" color="#969C9E" tag="i" /><span>暂无收货地址</span>
						</p>
						<p class="add-text">
							<span>添加地址</span>
							<van-icon name="arrow" class="arrow-right" size="15px" color="#CDCDCD" tag="i" />
						</p>
					</div>
				</div>
				<div class="has-address" @click="toAddress" v-else>
					<div class="has-haed">
						<p class="icon"><van-icon name="location-o" size="26px" color="#969C9E" tag="i" /></p>
						<div class="province">
							<p class="name">
								<span class="ellipsis">{{firstList.name}}</span>
								<span class="ellipsis">{{firstList.tel}}</span>
							</p>
							<p class="text">{{firstList.province}}&nbsp; {{firstList.city}}&nbsp; {{firstList.county}} &nbsp;{{firstList.addressDetail}}</p>
						</div>
						<p class="has-text"><span>修改地址</span>
							<van-icon name="arrow" size="15px" color="#CDCDCD" tag="i" />
						</p>
					</div>
				</div>
				<div class="home-list clearfix">
					<div class="list-wrap">
						<div class="list-left">
							<van-image width="80" :src="detailData.smallPic" radius="10px" />
						</div>
						<div class="list-right">
							<h3>{{detailData.productName}}({{detailData.farmName}})</h3>
							<div class="sale-box clearfix">
								<span class="sale-money nr_weight">养殖地：{{detailData.originProvince}}</span>
								<span class="sale-money span2">牧场：{{detailData.farmName}}</span>
							</div>
							<div class="sale-box clearfix">
								<span class="sale-money nr_weight">重量：{{detailData.productWeight}}kg/头</span>
								<span class="sale-money span2">单价：{{detailData.salesPrice}}元/kg</span>
							</div>
							<div class="price-box clearfix">
								<span class="price"><i>{{detailData.totalPrice}}</i><em>元/头</em></span>
							</div>
						</div>
					</div>
				</div>	
				<div class="yz-box">
					<span class="yz_span">养殖期：<i style="color: #31BC8D;">{{detailData.timeLimit}}</i>个月</span>
					<span class="yz_jh">剩余交货期：<i style="color: #31BC8D;">{{detailData.deliveryMonth}}</i>个月</span>
				</div>
				<div class="calculation">
					<div class="calculation-wrap">
						<div class="list fitst-list">
							<span class="title">存货数量</span>
							<span class="subtitle count">{{detailData.numSaves}}头</span>
							<span class="stepper"><van-stepper :max="detailData.numSaves" v-model="value" @plus="addAction" @minus="minusdAction" /></span>
						</div>
						<div class="list">
							<span class="list-title">总重量</span>
							<span class="subtitle">{{product.product.totalWeight}}kg</span>
						</div>
						<div class="list">
							<span class="list-title">总金额</span>
							<span class="subtitle"><i>{{product.product.totalPrice}}元</i></span>
						</div>
						<div class="list">
							<span class="list-title">配送方式</span>
							<span class="subtitle">{{detailData.shipmentCategory}}</span>
						</div>
						<div class="list">
							<span class="list-title">物流费用</span>
							<span class="subtitle"><i>{{detailData.expressFee}}元</i></span>
						</div>
						<div class="list">
							<span class="list-title">配送时间</span>
							<span class="subtitle">{{detailData.expressTime}}<img src="@/assets/img/home_img12.png" class="icon-ps" alt="" @click="showtip"></span>
						</div>
						
					</div>
				</div>
			</div>
			<home-order-com v-else :detailData="orderDetail"></home-order-com>
			<div class="zf-box">
				<div class="zf-wrap">
					<h2>支付方式</h2>
				</div>
				<div class="cell-zf">
					<div class="left">
						<!-- 余额支付 -->
						<div class="left-box">
							<img src="@/assets/img/home_img29.png" alt="" style="margin-top: 14px;">
							<span class="wechart">余额支付</span>
							<i class="ye-money">{{accountMoney}}元</i>
						</div>
						<span class="radio">
							<div class="chenboxaa" @click="isCheckedClick3" v-if="isChecked3">
								<van-icon name="checked" color="#31BC8D" size="22px" tag="i" style="margin-top: 16px;" />
							</div>
							<div class="chenboxaa" @click="isCheckedClick3" v-else>
								<van-icon name="circle" color="#999" size="22px" tag="i" style="margin-top: 16px;" />
							</div>
						</span>
					</div>
				</div>
				<div class="cell-zf">
					<div class="left">
						<!-- 微信支付 -->
						<div class="left-box">
							<img src="@/assets/img/wechart.png" alt="">
							<span class="wechart">微信支付</span>
							
						</div>
						<span class="radio">
							<div class="chenboxaa" @click="isCheckedClick2" v-if="isChecked2">
								<van-icon name="checked" color="#31BC8D" size="22px" />
							</div>
							<div class="chenboxaa" @click="isCheckedClick2" v-else>
								<van-icon name="circle" color="#999" size="22px" />
							</div>
						</span>
					</div>
				</div>
				<div class="cell-zf">
					<div class="left" style="justify-content: start;">
						<span class="radio">
							<!-- 阅读且同意 -->
							<div class="chenboxaa" @click="isCheckedClick" v-if="isChecked">
								<van-icon name="checked" color="#31BC8D" size="22px" />
							</div>
							<div class="chenboxaa" @click="isCheckedClick" v-else>
								<van-icon name="circle" color="#999" size="22px" />
							</div>
						</span>
						<span class="wechart" style="margin-left: 16px;">阅读且同意 <i style="color: #31BC8D;" @click="jumpAgreement">《友牧农场服务协议》</i></span>
					</div>	
				</div>
			</div>
		
		</div>
		
		
		<div class="footer">
			<p class="total" v-if="this.$route.query.fromView !== 'order'"><span>共{{value}}头</span><span class="totalMoney">总计：{{$store.getters.totalMoney}}元</span></p>
			<p class="total" v-else><span>共{{orderDetail.orderProductVo.quantity}}头</span><span class="totalMoney">总计：{{orderDetail.orderProductVo.payMoney}}元</span></p>
			<van-button round class="u-btn-default bind-btn" @click="keepSave">确定购买</van-button>
		</div>
		<router-view></router-view>
		
		<!--  交易密码框 -->
		<van-overlay
		  :show="YEpayoverlay"
		/>
		<!-- 数字键盘 -->
		<van-number-keyboard
		  :show="YEpayoverlay"
		  @input="onInput"
		  @delete="onDelete"
		  @blur="showKeyboard = false"
		/>
		<div class="YEpayoverlay" v-show="YEpayoverlay">
			<div class="pay-head">输入交易密码 <van-icon name="cross" color="#31BC8D" size="20" tag="i" @click="hideKeyborard" /></div>
			<div class="pass-box">
				<!-- 密码输入框 -->
				<van-password-input
					:value="over_payData.payPwd"
					:focused="showKeyboard"
					@focus="showKeyboard = true"
				/>
				
			</div>
			<div class="pass-footer">
				<van-button round class="u-btn-default bind-btn pass-btn" @click="keepPass">确认</van-button>
			</div>
			
		</div>
	</div>
</template>
<!-- 
	一只牛： 650公斤
	单价     20000
	物流费用    0
	牛肉费用   // 牛肉费用  数量 * 单价  
	共计： 牛肉费用 + 物流费用
 -->

<script>
	import HomeOrderCom from '@/components/homeCom/HomeOrderCom.vue';
	import Storage from "@/utils/storage";
	import { mapState, mapMutations, mapActions, mapGetters } from 'vuex';
	import Vue from 'vue'
	import { Stepper ,Image, Checkbox, CheckboxGroup, Dialog, Toast, Overlay, PasswordInput, NumberKeyboard } from 'vant';
	Vue.use(Stepper).use(Image).use(Checkbox).use(CheckboxGroup).use(Toast).use(Overlay).use(PasswordInput).use(NumberKeyboard);
	import AddressCom from '@/components/homeCom/address/Address.vue'
	export default {
		components:{
			HomeOrderCom,
			AddressCom,
			[Dialog.Component.name]: Dialog.Component
		},
		data(){
			return{
				showKeyboard: true,
				YEpayoverlay: false,
				isChecked: false,  // 协议
				isChecked2: false,  // 微信支付
				isChecked3: false,  // 余额支付
				id: '',
				value: 1,     //  最小为1
				weight: '',
				price: '',
				totalMoney: '',
				detailData: {},
				firstList: {},
				expressFee: ''  ,// 物流费用,
				productData: {
					productId: '',
					quantity: '',
					payMethod: 1,
					addressId: ''
				},
				orderId: '',
				over_payData: {   // 余额支付
					order_id: '',
					payPwd: ''  //
				},
				accountMoney: '',  //钱包余额
				idCard: '',
				orderDetail: {
					orderProductVo:{
						smallPic: ''
					}
				},
				addressId: '',
				
			}
		},
		computed:{
			...mapState([
					'product',
					'user'
				])
		},
		watch: {
			//  监听value变化  计算
			value: function(newVal,oldVal){
				this.productData.quantity = newVal;  //  数量
				if(newVal == ''){
					this.value = 1;
				}
				let weight = Number(this.value) * Number(this.weight * 1);  //  重量    数量 * 重量
				this.$store.commit('totalWeight', weight)
				let price = Number(this.value) * Number(this.price * 1);   // 牛肉费用  数量 * 单价
				this.$store.commit('totalPrice', price)
			},
			//  监听 牛肉重量
			weight: function(newVal,oldVal){
				let weight = Number(this.value) * Number(newVal * 1);  //  重量    数量 * 重量
				this.$store.commit('totalWeight', weight)
			},
			//  监听 牛肉金额  user.userInfo.accountMoney
			price: function(newVal, oldVal){
				let price = Number(this.value) * Number(newVal * 1);   // 牛肉费用  数量 * 单价
				this.$store.commit('totalPrice', price)
			}
		},
		created(){
			this.id = this.$route.params.id;
			console.log(this.id)
			if(this.$route.query.fromView == 'order'){
				console.log('订单')
				this.getOrderData()
			} else {
				// 获取推荐资源详情数据
				this.productData.productId = this.$route.params.id;  // 商品id
				this.getDetailData();
			}
			this.saveStatus()  // 初始化函数
			this.getUserData()  // 用户信息数据 拿钱包余额
			if(Storage.get('addressId')){
				this.getAddressListById()
			} else {
				this.getAddressList();
			}
		},
		methods:{
			// 待支付订单详情数据  GET /api/order/user_detail/{order_id}
			getOrderData(){  
				this.$api.get('/api/order/user_detail/' + this.id)
				.then(({data})=>{
					console.log(data)
					this.orderDetail = data;
				})
			},
			// 下单方法
			saveOrderFun(){
				this.$api.post('/api/order/save_order', this.productData)
				.then((res)=>{
					this.orderId = res.data;
					this.over_payData.order_id = res.data;
					this.YEpayoverlay = true;
				})
			},
			// 余额支付方法
			over_pay(){
				this.$api.post('/api/order/over_pay/' + this.over_payData.order_id, this.over_payData)
				.then((res)=>{
					console.log(res)
					if(res.code == 0){
						//  购买完跳转到 购买状态页面
						this.$router.push({
							path: '/home/status',
							query: {
								orderId: this.orderId
							}
						})
						return
					}else if(res.data.code == 20014){   //交易密码错误
						this.over_payData.payPwd = '';
						this.$tool.toast(res.data.message)
					}
				})
			},
			wxPayFun(res){
				this.$api.post('/api/order/wx_pay/' + res)
				.then((res)=>{
					let resData = JSON.parse(res.data);
					console.log(resData)
					if(resData.package == 'prepay_id=null'){
						this.$toast('登录已过期，请重新登录');
						setTimeout(()=> {
							this.$store.commit("userLoginOut");
							this.$router.push('/login')
						}, 800);
						return
					} else {
						WeixinJSBridge.invoke('getBrandWCPayRequest', {
						        "appId": resData.appId,
						        "timeStamp": resData.timeStamp,
						        "nonceStr": resData.nonceStr,
						        "package": resData.package,
						        "signType": resData.signType,
						        "paySign": resData.paySign
						    },
						    function (res) {
								if(res.err_msg == "get_brand_wcpay_request:ok" ){
									window.location.href="http://cs.umubao.com/index.html";
								}
						    })
					}
					
				})
			},	
			// 交易密码确认
			keepPass(){
				if(Storage.get('checkedYE')){
					if(this.over_payData.payPwd.length == 0){
						this.$tool.toast('请输入密码')
						return
					} else if(this.over_payData.payPwd.length < 6){
						this.$tool.toast('请输入6位数密码')
						return
					}
					this.over_payData.payPwd = this.$md5(this.over_payData.payPwd);  // 加密密码 md5
					console.log(this.over_payData)
					//调余额支付方法
					this.over_pay()
				}
					
			},
			// 隐藏余额支付框
			hideKeyborard(){
				this.over_payData.payPwd = '';
				this.YEpayoverlay = false;
			},
			onInput(key) {
			    this.over_payData.payPwd = (this.over_payData.payPwd + key).slice(0, 6);
			},
			onDelete() {
			    this.over_payData.payPwd = this.over_payData.payPwd.slice(0, this.over_payData.payPwd.length - 1);
			},
			// 初始化函数
			saveStatus(){
				this.productData.quantity = 1   //  数量
				this.value = Storage.get('count');
				// 在这里获取选中支付状态渲染
				if(Storage.get('checkedYE')){
					this.isChecked3 = JSON.parse(Storage.get('checkedYE'));
				}
				if(Storage.get('checkedZF')){
					this.isChecked2 = JSON.parse(Storage.get('checkedZF'));
				}
				if(Storage.get('checkedXY')){
					this.isChecked = JSON.parse(Storage.get('checkedXY'));
				}
				if(Storage.get('addressId')){
					this.addressId = Storage.get('addressId');
				}
			},
			// 余额支付
			isCheckedClick3(){
				this.isChecked3 = !this.isChecked3;
				this.isChecked2 = false
				Storage.set('checkedYE', this.isChecked3)   //  存储 状态  同上
				Storage.del('checkedZF', this.isChecked2)   //  存储 状态  同上
			},	
			// 微信支付
			isCheckedClick2(){
				this.isChecked2 = !this.isChecked2;
				this.isChecked3 = false;
				Storage.set('checkedZF', this.isChecked2)   //  存储 状态  同上
				Storage.del('checkedYE', this.isChecked)   //  存储 状态  同上
			},
			isCheckedClick(){
				this.isChecked = !this.isChecked;
				Storage.set('checkedXY', this.isChecked)   //  存储 状态  同上
			},
			//  确定购买
			keepSave(){
				if(this.$route.query.fromView !== 'order'){
					this.payFun()
				} else {
					this.over_payData.order_id = this.id;
					this.orderId = this.id; 
					// 订单未支付状态跳进来支付
					if(!this.isChecked2 && !this.isChecked3){
						this.$toast({
							message: '请先选择支付方式'
						})
						return
					}
					if(!this.isChecked){
						this.$tool.toast('请先阅读且同意《友牧农场服务协议》')
						return
					}
					//余额不足
					if(Storage.get('checkedYE') && this.accountMoney < this.orderDetail.orderProductVo.payMoney) {
						this.$tool.toast('账户余额不足请选择其它支付方式');
						return
					}
					if(Storage.get('checkedYE')){
						this.YEpayoverlay = true;
					} else {
						console.log('微信支付')
						this.wxPayFun(this.over_payData.order_id) //微信支付方法
					}
					
				}	
				
			},
			// 支付方法
			payFun(){
				if(Object.keys(this.firstList).length == 0) { //  判断对象是否为空
					this.$toast({
						message: '请先添加收货地址'
					})
					return 
				}
				if(!this.isChecked2 && !this.isChecked3){
					this.$toast({
						message: '请先选择支付方式'
					})
					return
				}
				if(!this.isChecked){
					this.$tool.toast('请先阅读且同意《友牧农场服务协议》')
					return 
				}
				//  实名认证
				if(this.user.userInfo.idCard == null || this.user.userInfo.idCard == '') {  // 判断是否有实名
					this.$tool.toast('请先实名认证')
					setTimeout(()=>{
						this.$router.push({
							path: '/my/personalInfo/certification'
						})
					},800)
					return
				}
				// 余额不足提示
				if(Storage.get('checkedYE') && this.accountMoney < this.$store.getters.totalMoney) {
					this.$tool.toast('账户余额不足请选择其它支付方式');
					return 
				}
				// 余额支付
				if(Storage.get('checkedYE')){
					// 在vuex拿 isPayPwd 通过user拿   判断是否有设置交易密码  isPayPwd 1 代表有密码
					if(this.user.userInfo.isPayPwd !== 1){
						// 没有设置交易密码 跳设置交易密码页
						this.$tool.toast('请先设置交易密码')
						setTimeout(()=>{
							this.$router.push({
								path: '/my/accountSet/setTradePassword/99'
							})
						},800)
						return
					}
					if(this.user.userInfo.isPayPwd == 1){ 
						this.saveOrderFun()// 调用下单方法
						return
					}
				} else {
					this.$api.post('/api/order/save_order', this.productData)
					.then((res)=>{
						console.log(res)
						this.orderId = res.data;
						this.over_payData.order_id = res.data;
						// 微信支付方法
						this.wxPayFun(res.data)
					})
				}
			},
			toAddress(){
				// 判断 是否有地址数据，有的话跳转到  地址列表页面，没有跳转到新增页面  es6语法
				if(Object.keys(this.firstList).length == 0){
					this.$router.push({
						path: '/home/address/' + this.id
					})
				} else {
					this.$router.push({
						path: '/home/addresslist/' + this.id
					})
				}
			},
			// 获取地址列表接口
			getAddressList(){
				this.$api.post('/api/user/getaddresslist?noLoading')
				.then(({data})=>{
					
					if(data.length > 0){
						this.firstList = data[0];
						this.productData.addressId = data[0].id;  // 地址id
					} else {
						console.log(111)
						Storage.del('addressId')
					}
				})
			},
			getAddressListById(){
				this.$api.get('/api/user/getAddressById/' + this.addressId)
				.then(({data})=>{
					this.firstList = data;
					this.productData.addressId = data.id;  // 地址id
					console.log(data)
				})
			},
			jumpAgreement() { //跳转协议
				console.log(this.detailData)
				if(this.detailData.productCategory == 1){
					this.$router.push({
						name: 'purchaseAgreement',
						query: {
							id: -1
						}
					})
				} else if(this.detailData.productCategory == 2 || this.$route.query.fromView == 'order'){
						this.$router.push({
							name: 'supplyAgreement',
							query: {
								id: -1
							}
						})
				} 
			},
			// 新增  
			addAction(){
				++this.value;
				Storage.set('count', this.value)
			},
			//  减少   
			minusdAction(){
				--this.value;
				Storage.set('count', this.value)
			},
			// 获取推荐资源详情数据
			getDetailData(){
				this.$api.get('/api/product/detail/' + this.id)
				.then((data)=>{
					this.detailData = data.data;
					this.weight = this.detailData.productWeight;
					this.price = this.detailData.totalPrice;
				})
			},
			// 显示提示弹出框
			showtip(){
				this.$toast({
					message:'预计配送时间：养殖完成后的15个工作日内，完成屠宰加工后以冷链物流形式发货。',
					duration: 3000,
					className: 'paytoast'
				});
			},
			// 通过这个接口拿 钱包余额
			getUserData(){
				this.$api.get('/api/user/detail?noLoading')
				.then(({data})=>{
					this.accountMoney = data.accountMoney;  // 钱包余额
				})
			},
			// 跳 友牧农场服务协议
			toPurchaseAgreement (){
				this.$router.push({
                    name: 'purchaseAgreement',
                    query: {
                        id: -1
                    }
                })
			}
		},
		beforeDestroy(){
			Storage.set('count', Number(this.value))
		}
	}
</script>
<style lang="scss">
	
	/* 修改配送时间 感叹号 弹出框 */
	.pay-detail {
		.van-password-input__security li{
			border-right: 1px solid #D0CFCF;
			&:first-child {
				border-left: 1px solid #D0CFCF;
			}
		}
		.van-password-input__security::after{
			border: 1px solid #D0CFCF;
		}
		.van-number-keyboard{
			z-index: 9999999 !important;
		}
		.van-password-input{
			
		}
	}
	
	
</style>

<style lang="scss" scoped>
	.YEpayoverlay{
		width: 328px;
		position: fixed;
		left: 50%;
		top: 30%;
		margin-left: -164px;
		margin-top: -110px;
		background-color: #fff;
		border-radius:8px;
		z-index: 99;
		overflow: hidden;
		.pay-head{
			width: 100%;
			height: 48px;
			line-height: 48px;
			text-align: center;
			background-color: #F8F8F8;
			color: #5D6164;
			font-size: 16px;
			font-weight: 500;
			position: relative;
			i{
				position: absolute;
				right: 23px;
				top: 14px;
			}
		}
		.pass-box{
			margin-top: 29px;
			padding-bottom: 29px;
		}
		.pass-footer{
			width: 100%;
			text-align: center;
			padding-top: 14px;
			border-top: 1px solid #E5E5E5;
			padding: 14px 16px 14px 16px;
			.pass-btn{
				width:138px;
				height:44px;
			}
		}
	}
	.pay-wrap{
		width: 100%;
		height: calc(100% - 63px);
		overflow-y: scroll;
		-webkit-overflow-scrolling: touch;
	}
	.bg{
		width: 100%;
		height: 10px;
		background-color: #F8F8F8;
	}
	.bind-btn {
	    width: 144px;
		height: 51px;
		background:linear-gradient(90deg,#31BC8D 0%,#A6E29B 100%);
		border-radius:26px;
		color: #fff;
		font-size: 16px;
		box-shadow: none;
	  }
	.footer{
		width: 100%;
		height: 63px;
		padding: 0 16px;
		line-height: 63px;
		position: fixed;
		left: 0;
		bottom: 0;
		background-color: #fff;
		box-shadow:2px 2px 5px #c2c2c2;
		-webkit-box-shadow:2px 2px 5px #c2c2c2;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.total{
			color: #F58523;
			font-size: 16px;
			font-weight: 500;
			float: left;
			.totalMoney{
				margin-left: 15px;
			}
		}
	}
	
	.zf-box{
		background-color: #fff;
		text-align: left;
		
		.zf-wrap{
			padding: 0 16px;
			border-bottom: 1px solid #F2F2F2;
			h2{
				width: 100%;
				height: 48px;
				line-height: 48px;
				font-size: 16px;
				color: #344047;
			}
		}
		.cell-zf{
			width: 100%;
			height: 63px;
			background-color: #fff;
			padding: 0 16px;
			.left{
				height: 63px;
				display: flex;
				align-items: center;
				position:relative;
				justify-content: space-between;
				.left-box{
					img{
						width: 32px;
						vertical-align: middle;
					}
					.wechart{
						margin-left: 16px;
						color: #5D6164;
					}
					.ye-money {
						position: absolute;
						left: 48px;
						bottom: 0;
						color: #F58523;
					}
				}
			}
		}
	}
	.calculation{
		background-color: #fff;
		margin-bottom: 10px;
		.calculation-wrap{
			padding: 0 16px;
			display: flex;
			align-items: center;
			font-size: 16px;
			position:relative;
			flex-wrap: wrap;
			.fitst-list{
				width: 100%;
				height: 70px !important;
				display: flex;
				align-items: center;
				.count{
					font-size: 16px !important;
				}
			}
			.list{
				width: 100%;
				height: 46px;
				display: flex;
				align-items: center;
				border-bottom: 1px solid #F2F2F2;
				.list-title{
					font-size: 14px;
					color: #5D6164;
				}
				.subtitle{
					position: absolute;
					left: 104px;
					font-size: 14px;
					i{
						color: #31BC8D;
					}
					.icon-ps{
						width: 16px;
						margin-left: 4px;
						margin-bottom: -3px;
					}
				}
				.stepper{
					position: absolute;
					right: 16px;
				}
			}
		}
	}
	
	.yz-box{
		width: 100%;
		height: 34px;
		line-height: 34px;
		background-color: #fff;
		font-size: 12px;
		color: #969C9E;
		padding: 0 16px;
		margin-bottom: 10px;
		.yz_span{
			float: left;
		}
		.yz_jh {
			float: right;
		}
	}
	

.home-list {
		margin-top: 10px;
		width: 100%;
		padding: 16px 16px 18px 16px;
		background-color: #fff;
		border-bottom: 1px solid #f8f8f8;
		.list-wrap {
			width: 100%;
			display: flex;
			.list-left {
				height: 80px;
				.van-image {
					height: 80px;
				}
			}
			.list-right {
				height: 100%;
				flex: 3;
				padding: 1px 0 0 16px;
				h3 {
					color: #344047;
					font-size: 16px;
					text-align: left;
					margin-bottom: 10px;
					font-weight: 400;
				}
				.price-box {
					margin-top: 8px;
					.price {
						font-size: 12px;
						color: #F58523;
						float: left;
						i{
							font-weight: 500;
							font-size: 16px;
						}
						em{
							color: #969C9E;
							margin-left: 4px;
						}
						
					}
				}
				.sale-box {
					color: #969C9E;
					font-size: 12px;
					margin-bottom: 4px;
					.nr_weight {
						float: left;
					}
					.span2{
						float: right;
					}
				}
			}
		}
	}
	
	.has-address{
		width: 100%;
		height: 64px;
		background-color: #fff;
		position: relative;
		text-align: left;
			.has-haed{
			padding: 0 17px;
			.icon{
				width: 52px;
				text-align: center;
				position: absolute;
				top: 27%;
				left: 0;
				float: left;
			}
			.province{
				float: left;
				position: absolute;
				top: 23%;
				left: 15%;
				color: #5D6164;
				line-height: 20px;
				.name {
					.ellipsis{
						display: inline-block; 
						max-width: 100px; 
						overflow: hidden; 
						text-overflow:ellipsis; 
						white-space: nowrap;
					}
					.ellipsis:last-child {
						margin-left: 6px;
					}
				}
				.text{
					width: 220px;
					overflow: hidden;
					text-overflow:ellipsis;
					white-space: nowrap;
					font-size: 14px;
					
				}
			}
			.has-text{
				float: right;
				font-size: 12px;
				color: #969C9E;
				margin-top: 25px;
				span {
					margin-right: 7px;
				}
				i {
					vertical-align: middle;
				}
			}
		}
	}
		.address:before,.has-address:before {
			position: absolute;
			right: 0;
			bottom: 0;
			left: 0;
			height: 1px;
			background: -webkit-repeating-linear-gradient(135deg, #ff6c6c 0, #ff6c6c 20%, transparent 0, transparent 25%, #1989fa 0, #1989fa 45%, transparent 0, transparent 50%);
			background: repeating-linear-gradient(-45deg, #ff6c6c 0, #ff6c6c 20%, transparent 0, transparent 25%, #1989fa 0, #1989fa 45%, transparent 0, transparent 50%);
			background-size: 115px;
			content: '';
		}
		
		.address {
			width: 100%;
			height: 64px;
			position: relative;
			background-color: #fff;
			.head {
				display: flex;
				justify-content: space-between;
				align-items: center;
				width: 100%;
				height: 100%;
				// text-align: left;
				padding: 0 17px;
				// position: relative;
				line-height: 64px;
				p {
					width: 50%;
				}
				p:last-child {
					text-align: right;
				}
				.address-icon {
					float: left;
					i {
						vertical-align: middle;
					}
					span {
						margin-left: 16px;
						color: #5D6164;
					}
				}
				.add-text {
					float: right;
					font-size: 12px;
					color: #969C9E;
					span {
						margin-right: 7px;
					}
					i {
						vertical-align: middle;
					}
					.arrow-right {
						position: relative;
						top: -1px;
					}
				}
			}
		}
</style>